<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main flow-form-main">
      <div class="JNPF-common-page-header">
        <el-page-header @back="goBack" :content="!dataForm.id ? '新建会费' : '查看会费'" />
        <div class="options">
          <el-button type="primary" v-if="!dataForm.id" @click="dataFormSubmit()" :loading="btnLoading">
            {{$t('common.confirmButton')}}</el-button>
          <el-button @click="goBack()">{{$t('common.cancelButton')}}</el-button>
        </div>
      </div>
      <el-row class="main" v-loading="loading">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px"
          @submit.native.prevent>
          <el-col :span="12">
            <el-form-item label="会员名称" prop="vipInfoId">
              <el-select v-model="dataForm.vipInfoId" placeholder="选择会员名称" :disabled="!!dataForm.id" @change="selectChange">
                <el-option v-for="(item,index) in vipInfoIdList" :key="index"
                  :label="item.vipName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会员等级" prop="vipLevelId">
              <el-select v-model="dataForm.vipLevelId" placeholder="选择会员等级" clearable :disabled="true">
                <el-option v-for="(item,index) in levelCodeList" :key="index" :label="item.levelName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应交会费" prop="amount">
              <el-input v-model="dataForm.amount" placeholder="应交会费" type="number" :disabled="!!dataForm.id" :min="0" clearable>
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会费到期时间" prop="expireTime">
              <el-date-picker  v-model="dataForm.expireTime" placeholder="请选择时间" :disabled="!!dataForm.id" clearable  :style='{"width":"100%"}' type="date"  format="yyyy-MM-dd"  value-format="timestamp" ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="支付方式" prop="payType">
              <el-select v-model="dataForm.payType" placeholder="选择支付方式" :disabled="!!dataForm.id" clearable>
                <el-option v-for="(item,index) in payTypeList" :key="index"
                  :label="item.fullName" :value="item.enCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="缴费时间" prop="paymentDate">
              <el-date-picker  v-model="dataForm.paymentDate" placeholder="请选择时间" :disabled="!!dataForm.id"  clearable  :style='{"width":"100%"}' type="datetime"  format="yyyy-MM-dd HH:mm:ss"  value-format="timestamp" ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </transition>
</template>
<script>
import { vipInfoIdList, vipAmountInfo, addVipAmount, editVipAmount } from '@/api/asso/vip/vipAmount'
import { vipLevelList } from "@/api/asso/vip/vipInfo";
import { getVipGrade } from '@/api/asso/vip/vipLevel'
export default {
  name: 'msgTemplate-Form',
  data() {
    return {
      dataForm: {
        id: '',
        vipInfoId: '',
        vipLevelId: '',
        amount: '',
        expireTime: '',
        payType: '',
        paymentDate: ''
      },
      dataRule: {
        vipInfoId: [
          { required: true, message: '会员名称不能为空', trigger: 'blur' },
        ],
        vipLevelId: [
          { required: true, message: '会员等级不能为空', trigger: 'change' },
        ],
        amount: [
          { required: true, message: '应交会费不能为空', trigger: 'blur' },
        ],
        expireTime: [
          { required: true, message: '会费到期时间不能为空', trigger: 'blur' },
        ],
        payType: [
          { required: true, message: '支付方式不能为空', trigger: 'change' },
        ],
        paymentDate: [
          { required: true, message: '缴费时间不能为空', trigger: 'blur' },
        ]
      },
      btnLoading: false,
      loading: false,
      payTypeList: [],
      levelCodeList: [],
      isEdit: false,
      keyword: "",
      parameterList: [],
      allParameterList: [],
      smsList: [],
      vipInfoIdList: []
    }
  },
  methods: {
    init(id) {
      this.dataForm.id = id || ''
      this.parameterList = []
      this.allParameterList = []
      this.getVipGrade()
      this.getPayType()
      this.getVipList()
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true
          vipAmountInfo(this.dataForm.id).then(res => {
            this.loading = false
            this.dataForm = res.data
            this.parameterList = res.data.templateParamList
            this.allParameterList = this.parameterList
            this.smsList = res.data.smsFieldListgetConfig
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    // 新增、编辑
    dataFormSubmit() {
      this.dataForm.templateParamList = []
      this.dataForm.smsFieldList = []
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if(this.dataForm.amount <= 0){
            this.$message.error('会费金额请输入正数')
            return
          }
          this.dataForm.templateParamList = this.parameterList
          this.dataForm.smsFieldList = this.smsList
          this.btnLoading = true
          if (!!this.dataForm.id) {
            editVipAmount(this.dataForm.id, this.dataForm).then((res) => {
              this.$message({
                message: res.msg,
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.btnLoading = false
                  this.$emit('close', true)
                }
              })
            }).catch(() => { this.btnLoading = false })
          } else {
            addVipAmount(this.dataForm).then((res) => {
              this.$message({
                message: res.msg,
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.btnLoading = false
                  this.$emit('close', true)
                }
              })
            }).catch(() => { this.btnLoading = false })
          }
        }
      })
    },
    goBack() {
      this.$emit('close')
    },
    // 获取会员等级列表数据
    getVipGrade() {
      vipLevelList().then((res) => {
        if (res.code == 200) {
          this.levelCodeList = res.data.list;
        }
      });
    },
    // 获取会员列表
    getVipList(){
      vipInfoIdList().then((res) => {
        if (res.code == 200) {
          this.vipInfoIdList = res.data.list;
        }
      });
    },
    // 获取会员支付方式
    getPayType(){
      getVipGrade('367299187424887877').then(res => {
        if(res.code == 200){
          res.data.list.forEach((item) => {
            item.sortCode = String(item.sortCode)
          })
          this.payTypeList = res.data.list
        }
      })
    },
    // 选择会员带出会员等级
    selectChange(e){
      this.dataForm.vipLevelId = ''
      try{
        this.vipInfoIdList.forEach((item) => {
          if(item.id == e){
            this.dataForm.vipLevelId = item.vipLevelId
            throw Error();
          }
        })
      }catch(e){
        console.log(e)
      }
    }
  }
}
</script>